show time

revision:


local time in different places

code:
            <div class="spec grid">
                <div id="digital" class="clock" onload="showTime()"></div>
                <div id="digital-1" class="clock"></div>
                <div id="digital-2" class="clock"></div>
                <div id="digital-3" class="clock"></div>
            </div>
            <style>
                .clock{position: relative; width: 30vw; height: 3vw; border: 0.2vw solid darkgrey; 
                    background-color: lightgrey; color: blue; padding: 1vw;}
                #digital {position: relative; top: 5%; left: 0%; color: black; font-size: 2vw; 
                    font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
                #digital-1 {position: relative; top: 5%; left:0%; color: blue; font-size: 2vw; 
                    font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
                #digital-2 {position: relative; top: 5%; left:0%; color: white; font-size: 2vw; 
                    font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
                #digital-3 {position: relative; top: 5%; left:0%; color: red; font-size: 2vw; 
                    font-family: 'Righteous', cursive;letter-spacing: 0.1vw;}
            </style>
            <script>
                function showTime(){
                    var date = new Date();
                    var h = date.getHours(); 
                    var m = date.getMinutes(); 
                    var s = date.getSeconds();
                    var shanghai = date.getHours(); 
                    var tokyo = date.getHours()+1;
                    var brussels = date.getHours()-7;
                    var london = date.getHours()-8;
                    var session = "AM";
                    
                    if(h == 0){ h = 12; }
                    if( h > 12){ h ; session = "PM"; }  
                    if(tokyo > 12){ h ; session = "PM"; } 
                    if(brussels > 12){ h ; session = "PM"; } 
                    if(london > 12){ h ; session = "PM"; } 
                    
                    h = (h < 10) ? "0" + h : h;
                    m = (m < 10) ? "0" + m : m;
                    s = (s < 10) ? "0" + s : s;
                    
                    var time = h + ":" + m + ":" + s + " " + session;
                    var tokyo_time = tokyo + ":" + m + ":" + s + " " + session;
                    var brussels_time = brussels + ":" + m + ":" + s + " " + session;
                    var london_time = london + ":" + m + ":" + s + " " + session;
                
                    document.getElementById("digital").innerText = "Shanghai: " + time;
                    document.getElementById("digital-1").textContent = "Tokyo: " + tokyo_time;
                    document.getElementById("digital-2").innerText = "Brussels: " + brussels_time;
                    document.getElementById("digital-3").textContent = "London: " + london_time;
                
                    setTimeout(showTime, 1000);
                    
                }
                showTime();
            </script>